import { Breadcrumb, Button, Card, Form, Input, Space } from 'antd';
import React from 'react';
import { Link } from 'react-router-dom';
/*
  学习目标：发布文章-静态结构准备
  1. 组件调整为函数式组件
  2. 看需求文档和Antd，调整为Card + Form完成静态结构
  3. 调整需要的内容
*/

export default function ArticlePublish() {
  return (
    <div>
      <Card
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to="/home">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>发布文章</Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        <Form size="large" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
          <Form.Item label="标题" name="title">
            <Input />
          </Form.Item>
          <Form.Item label="频道" name="channel_id">
            <Input />
          </Form.Item>
          <Form.Item label="内容" name="content">
            <Input />
          </Form.Item>
          <Form.Item label="封面" name="cover">
            <Input />
          </Form.Item>
          <Form.Item
            wrapperCol={{
              // offset代表的是从左向右的偏移量
              offset: 4,
            }}
          >
            <Space>
              <Button type="primary" htmlType="submit">
                发布文章
              </Button>
              <Button type="primary" htmlType="submit">
                存草稿
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}
